<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>基础函数方法演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css"></style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	    $(document).ready(function(){
	        $("button.htmlz").click(function(){
	            eval($("textarea.htmlz").val());
	        });
	        $("button.format").click(function(){
	            eval($("textarea.format").val());
	        });
	    });
	</script>
</head>
<body>
	<div class="main-wrapper">

		<h3>HY-UI Demos</h3>

		<div class="theme">基础函数方法演示用例。</div> <strong>1.HTML标签组建函数</strong>
		<br/>
		<p> <em>hy.htmlz(s);</em>
			输入遵循相应规则的字符串，将自动生成组建好HTML标记并返回。
		</p> <strong>1.1</strong>
		单独一个元素 <em>(E)</em>
		<pre><code class="javascript">// &lt;div&gt;&lt;/div&gt;

hy.htmlz("div");
</code></pre>
		<p>&nbsp;</p>
		<strong>1.2</strong>
		指定ID的元素
		<em>(E#id)</em>
		<pre><code class="javascript">//&lt;div id="main"&gt;&lt;/div&gt;

hy.htmlz("div#main");
</code></pre>
		<p>&nbsp;</p>
		<strong>1.3</strong>
		指定类名的元素
		<em>(E.classname)</em>

		<pre><code class="javascript">//&lt;div class="ui message"&gt;&lt;/div&gt;

hy.htmlz("div.ui.message");</code></pre>

		<p>&nbsp;</p>

		<strong>1.4</strong>
		指定样式的元素
		<em>(E{prop:value;})</em>
		<pre><code class="javascript">// &lt;div style="width:200px,height:100px;"&gt;&lt;/div&gt;

hy.htmlz("div {width:200px,height:100px;}");</code></pre>
		<p>&nbsp;</p>

		<strong>1.5</strong>
		指定属性的元素
		<em>(E [name=value[,...]])</em>
		<pre><code class="javascript">// &lt;input type="text" name="user" /&gt;

hy.htmlz("input [type='text',name='user']");</code></pre>

		<p>&nbsp;</p>

		<strong>1.6</strong>
		并行元素
		<em>(E+E)</em>
		<pre><code class="javascript">// &lt;div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;

hy.htmlz("div+p");</code></pre>

		<p>&nbsp;</p>

		<strong>1.7</strong>
		子元素
		<em>(E>E)</em>
		<pre><code class="javascript">// &lt;div&gt;p&gt;&lt;/p&gt;&lt;/div&gt;

 hy.htmlz("div>p");</code></pre>

		<p>&nbsp;</p>

		<strong>1.8</strong>
		多个元素
		<em>(E*N)</em>
		<pre><code class="javascript">//&lt;div&gt;
//     &lt;ul id="list"&gt;
//         &lt;li class="item"&gt;&lt;/li&gt;
//         &lt;li class="item"&gt;&lt;/li&gt;
//         &lt;li class="item"&gt;&lt;/li&gt;
//     &lt;/ul&gt;
//&lt;/div&gt;

hy.htmlz("div>ul#list>li.item*3");</code></pre>
		<br/>
		<p>
			修改后运行代码查看效果
			<em>请输入标准的JavaScript代码</em>
			<br/>
			<br/>
			<textarea class="htmlz" rows="5" cols="50">
var d = hy.htmlz("div#main>h3");
alert(d);
			</textarea>
			<br/>
			<button class="htmlz">运行代码</button>
		</p>
		<br/>

		<strong>2.字符串格式化函数</strong>
		<p>
			<em>hy.format()</em>
			替换字符串中的占位符，返回新的字符串。
		</p>
		<strong>2.1</strong>
		占位符格式为 {index} index索引以0开始
		<pre><code class="javascript">// "hello tom, long time no see."

hy.format("hello {0},{1}.","tom","long time no see");</code></pre>

		<br/>
		<p>
			修改后运行代码查看效果
			<em>请输入标准的JavaScript代码</em>
			<br/>
			<br/>
			<textarea rows="5" cols="50" class="format">
var string = hy.format("hello {0},{1}.","tom","long time no see");
alert(string);
			</textarea>
			<br/>
			<button class="format">运行代码</button>
		</p>
		<br/>

		<strong>3.数组判定函数</strong>
		<p>
			<em>hy.isArray(o)</em>
			判定javascript对象是否为数组，返回布尔值
		</p>
		<strong>3.1</strong>
		对象判定
		<pre><code class="javascript">hy.isArray({}); // false
hy.isArray([]); // true;
hy.isArray(1); // false;
hy.isArray("1"); // false;
</code></pre>

		<p>&nbsp;</p>

		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>

	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>

</html>